<template>
    <div class="qilin-QilinWangEditor">
        <div class="header">注意</div>
        <div class="content warning">因为本人项目的原因，涉及到的富文本编辑器功能比较浅，因为针对该编辑器只是封装了对应图片的粘贴和上传图片的功能，若有需求亦可留言作者，后续会研究加上定制化功能</div>
        <div class="content warning">更多功能各位大佬亦可直接去参考官方文档，附上链接https://www.wangeditor.com/</div>
        <br>
        <br>
        <div class="header">基本使用</div>
        <QilinWangEditor v-model:wangEditorConfig="wangEditorConfig"
            content="我是初始化的内容"
            @uploadImage="uploadImage"
        ></QilinWangEditor>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <!-- <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable> -->
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinWangEditor v-model:wangEditorConfig="wangEditorConfig"
            content="我是初始化的内容"
            @uploadImage="uploadImage"
        ></QilinWangEditor>
        // --js部分
        const uploadImage=(file,insertFn)=>{
            console.log(file,insertFn);
            insertFn("http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",file.name,"");
        };

        const wangEditorConfig=reactive({
            editorConfig:{
                placeholder:"请输入内容"
            }
        });
    `
});


/*
    逻辑脚本代码区域
*/
const uploadImage=(file,insertFn)=>{
    console.log(file,insertFn);
    insertFn("http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",file.name,"");
};

const wangEditorConfig=reactive({
    editorConfig:{
        placeholder:"请输入内容"
    }
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 1 && columnIndex === 0) ||
            //     (rowIndex === 6 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"value",
            attrType:"string",
            description:"显示的内容，优先级低于content传参，content传参一般用于回显内容",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"styles",
            attrType:"object",
            description:"自定义样式",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"toolbarStyle",
                    attrType:"string",
                    description:"工具栏的自定义样式",
                    valuable:"-",
                    default:"border-bottom:1px solid #ccc;",
                },
                {
                    attrName:"editorStyle",
                    attrType:"string",
                    description:"编辑器的自定义样式",
                    valuable:"-",
                    default:"height:320px;overflow-y:hidden;",
                },
            ]
        },
        {
            attrName:"mode",
            attrType:"string",
            description:"模式",
            valuable:"'default' | 'simple'",
            default:"default"
        },
        {
            attrName:"toolbarConfig",
            attrType:"object",
            description:"工具栏的配置项",
            valuable:"-",
            default:"{}"
        },
        {
            attrName:"editorConfig",
            attrType:"object",
            description:"编辑器的配置项",
            valuable:"-",
            default:"{}",
            children:[
                {
                    attrName:"placeholder",
                    attrType:"string",
                    description:"占位符",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"readOnly",
                    attrType:"boolean",
                    description:"是否只读",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"autoFocus",
                    attrType:"boolean",
                    description:"是否聚焦",
                    valuable:"true/false",
                    default:"true",
                }
            ]
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"success",
            eventType:"function",
            eventValue:"value",
            description:"富文本编辑器失去焦点后触发的事件，得到编辑器的内容"
        },
        {
            eventName:"uploadImage",
            eventType:"function",
            eventValue:"file,insertFn",
            description:"点击富文本编辑器中的上传图片或者自定义粘贴图片触发的事件"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"handleBlur",
            exposeType:"function",
            exposeValue:"-",
            description:"富文本编辑器失去焦点后触发"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
